<template>
  <div class="home">
      <div class="nav">
        <div>
          <b>西安</b>
        <span class="iconfont icon-xiajiantou" ></span>
        </div>
        
         <div>
            <input type="text" placeholder="会员抽取苹果13">
        <span class="iconfont icon-ic_search24px c0"></span>
         </div>
        <p>证照信息</p>
      </div>
      <div class="lists">
       <ul>
        <li @click="list()">精选 </li>
        <li @click="list()">话剧音乐剧</li>
        <li @click="list()">相声脱口秀</li>
        <li @click="list()">展览</li>
        <li @click="list()">演唱会</li>
        <li @click="list()">Livehouse</li>
        <li @click="list()">音乐节</li>
        <li @click="list()">音乐节</li>
        <li @click="list()">音乐节</li>
      </ul>
      </div>
      <div class="swarp">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> 
          <van-swipe-item><img src="imgs/homeimg/h1.png"></van-swipe-item> 
          <van-swipe-item><img src="imgs/homeimg/h2.png"></van-swipe-item> 
          <van-swipe-item><img src="imgs/homeimg/h3.png"></van-swipe-item> 
          <van-swipe-item><img src="imgs/homeimg/h4.png"></van-swipe-item> 
        </van-swipe>
      </div>
      <div class="clists">
        <ul>
          <li v-for="(v,i) in carr" :key="i" @click="fun3()">
            <h3>
              <!-- 图片引入时  需绑定变量  不能直接引本地地址 -->
              <img :src=v.img alt="">
            </h3>
            <p>{{v.title}}</p>
          </li>
        </ul>
      </div>
      <div class="qiangp">
       <p>抢票播报站<span class="c1">6.2万人围观</span>&nbsp;&nbsp;&nbsp; <span class="c2">汪苏泷武汉</span> </p>
       <div class="qiangp1">&gt;</div>
       <div class="img">
         <img src="imgs/homeimg/h11.png" >
       </div>
      </div>
      <div class="paihangb">
        <div class="text">
         <h4><router-link to="/">必看排行榜</router-link></h4> 
          <h5><router-link to="/jingxuanbang">精选榜</router-link></h5>
           <p>广场&gt;</p>
        
        </div>
      <router-view></router-view>
      </div>
      <div class="wuzhen">
        <img src="imgs/homeimg/h22.png" >
      </div>
      <div class="sdays">
        <div class="text2">
             <h3 @click="fun('Seven')"> 七日精选 </h3> 
             <h5 @click="fun('Month')"> 月度看点 </h5>
             <p>日历&gt;</p>
        </div>
         <component :is="com"></component> 
       <div class="pinpai">
         <div class="text2" >
              <h5>品牌馆</h5>
              <p>全部&gt;</p>
              
         </div>
         <div  class="text3">
             <div v-for="(v,i) in parr" :key="i">
               <img :src=v.img1 >
         </div>
         </div>
       
            
         </div> 
          <!--推荐  -->
         <div class="tuijian">
           <div class="text4">
             <h5  @click="fun1('Tuijian')">为你推荐</h5>
             <span @click="fun1('Kandian')">看展记</span> 

           </div>
             <component :is="com1"></component> 
         </div>
          
      </div>
       <Bb/>
  </div>
</template>

<script>
 import Month from '../components/homete/month.vue'
 import Seven from '../components/homete/seven.vue'
 import Tuijian from '../components/homrfo/kandian.vue'
 import Kandian from '../components/homrfo/tuijian.vue'
 import Bb from '../components/buttomBar.vue'
 import getlink from '../api/getapi'
 
 
export default {
    created(){
        getlink("/mock/data/ticket").then((ok)=>{
          // console.log(ok.data.carr)
          this.carr=ok.data.carr
        })
      },
  components:{
     
    Month,
    Seven,
    Tuijian,
    Kandian,
    Bb,
    
  },
   data(){
     return {
      //  数据在后端
       carr:[],
      
       com:'Seven',
       com1:'Tuijian',
       parr:[
         {img1:'imgs/homeimg/h28.png'},
         {img1:'imgs/homeimg/h28.png'},
         {img1:'imgs/homeimg/h28.png'},
         {img1:'imgs/homeimg/h28.png'},
         {img1:'imgs/homeimg/h28.png'}
       ]
     }
   },
   methods:{
     fun(data){
      //  this.$router.push("/paihangbang")
      this.com=data
      // console.log(1)
     },
     fun1(data){
       this.com1=data
       console.log('1')
     },
     list(){
        this.$router.push('/conlist')
     },
     fun3(){
       this.$router.push('/jingwai')
     }
      
   }
}
</script>

<style scoped>
   .nav{
     width: 100%;
     height: 0.5rem;
     line-height: 0.5rem;
     background-color: skyblue;
     display: flex;
     justify-content: space-around;
     position: relative;
   }
   .swarp{
     /* 背景图的路径需要根据home.vue的地址去找 */
     background: url('../../public/imgs/homeimg/h0.png') no-repeat center;
     background-size: 100% 3rem;  
     
     width: 100%;
     height: 3rem;
     overflow: hidden;
   }
   .my-swipe .van-swipe-item { color: #fff; 
  font-size: 20px; 
  line-height: 150px; 
  text-align: center; 
  /* background-color: #39a9ed;  */
  float: left;
  }
  .swarp img{
    height: 1.5rem;
  } 
  .nav b{
     color: red;
     font-size: 0.2rem;
  }
  
  .nav input{
    height: 0.4rem;
    border-radius: 0.5rem;
    width: 2.5rem;
    text-indent: 0.3rem;
    margin-top: 0.02rem;
  }
   .nav .c0{
     position: absolute;
     right: 0.8rem;
   }
  .nav p{
    font-size: 0.1rem;
    border:0.01rem solid black;
    border-radius:0.3rem ;
    color: white;
  }
  .home .lists{
      width: 100%;
    height: 0.5rem;
    background-color: skyblue;
  }
.home .lists ul{
  width: 100%;
  height: 0.5rem;
  display: flex;
  white-space: nowrap;
    flex-wrap: nowrap;
    overflow-x:auto;
}
  .home .lists ul li{
    font-size: 0.2rem;
    line-height: 0.5rem;
    color: white;
    list-style: none;
    
    margin-right: 0.2rem;
  
  }
  .home  .swarp img{
    width: 100%;
  }
  .clists{
    width: 100%;
    height: 0.8rem;
    /* background-color: green; */
  
  }
  .clists ul{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 0.8rem;
    box-sizing: border-box;

  }
  .clists ul li{
    list-style: none;
    width: 20%;
    font-size: 0.18rem;
    padding-top: 0.2rem;
    text-align: center;
    /* line-height: 1rem; */
  }
  .clists ul:nth-child(1){
    /* margin-left: 0.15rem; */
  }
  .qiangp{
    width: 90%;
    height: 1rem;
    margin: 0.2rem  auto;
    background-color:pink;
    border-radius: 0.2rem;
    box-shadow: -0.02rem -0.02rem 0.02rem 0.02rem gray;
  }
    .qiangp p{
      font-size: 0.2rem;
      font-weight: bold;
      color: hotpink;
      border-bottom: 0.01rem solid gray;
      float: left;
    }
    .qiangp p .c1{
      font-size: 0.16rem;
    }
     .qiangp p .c2{
        color: black;
        font-size: 0.16rem;
     }
      .qiangp .qiangp1{
        font-size: 0.2rem;
        float: right;
      }
      .qiangp .img{
        width: 100%;
        height: 0.5rem;
      } 
      .qiangp .img img{
        width: 100%;
        height: 0.7rem;
      }
      .paihangb{
        width: 100%;
        height: 2rem;
        margin-top: 0.1rem;
        /* background-color: green; */
      }
      .paihangb .text{
        font-size: 0.2rem;
        display: flex; 
       
      }
       .paihangb .text h3{
         margin-right: 0.2rem;
       }
        .paihangb .text p{
          margin-left: 1.2rem;
        }
        a{
          text-decoration: none;
          color: black;
        }
        .paihangb .text h4{
          margin-right: 0.3rem;
        }
        .wuzhen{
          width: 100%;
          height: 1rem;
          text-align: center;
          margin: 0.1rem 0;
        }
        .wuzhen img{
          width: 90%;
          height: 100%;
        }
        .sdays{
          width: 100%;
          height: 3rem;
          /* background-color: purple; */
          font-size: 0.2rem;
          /* display: flex; */
        }
       .sdays  .text2{
         display: flex;
       }
       .sdays h3{
         margin-right: 0.3rem;
       } 
        .sdays  p{
          margin-left: 1.2rem;
        }
        .pinpai{
          width: 100%;
          height:2.3rem;
          /* background-color: gold; */
          font-size: 0.2rem;
          margin-top: 0.1rem;
        }
        .pinpai .text2{
         width: 100%;
          height:0.3rem;
          /* background-color: red; */
          line-height: 0.3rem;
          display: flex;
          justify-content: space-between;
        }
        .pinpai .text3{
          width: 100%;
          height: 2.7rem;
          display: flex;
         
          flex-wrap: nowrap;
          overflow-x: auto;
          
        }
        .pinpai .text3 img{
          width: 1.6rem;
          height: 2rem;
           margin-right: 0.1rem;
        }
         .tuijian{
           width: 100%;
           height: 2rem;
           /* background-color:deeppink; */
         }
         .tuijian .text4{
           display: flex;
         }
         .tuijian .text4 span{
           font-size: 0.15rem;
           margin-left: 0.2rem;
         }
</style>